<?php

use yii\helpers\Html;
use yii\helpers\Url;


/* @var $this yii\web\View */
/* @var $searchModel frontend\modules\resource\models\HyBookSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = '高级检索';
$this->params['breadcrumbs'][] = $this->title;
?>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
    .search-body {
        overflow: hidden;
        padding: 15px 0;
        min-width: 813px;
        border-bottom: 1px solid #7A7B7C;
    }

    .search-left {
        vertical-align: top;
        float: left;
        line-height: 40px;
        font-size: 16px;
        font-weight: bolder;
        text-align: right;
        min-width: 260px;
    }

    .search-right {
        overflow: hidden;
        vertical-align: top;
        margin-left: 260px;

    }

    .s_inpt {
        margin-right: 10px;
        float: left;
        line-height: 40px;
    }

    .search-btn {
        display: flex;
        height: 71px;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #7A7B7C;
    }
</style>
<div>

    <div id="app" class="resource-classes-view">
        <!--选择资源类型-->
        <div class="search-body">
            <div class="search-left">
                选择资源类型：
            </div>
            <div class="search-right">
                <el-select v-model="form_data.selected" placeholder="请选择" v-on:change="resourceType">
                    <el-option
                            v-for="item in options_type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

                <!--                    <select id="hybook-cat_id2" class="form-control" name="HyBook[cat_id2]" v-on:change="resourceType">
                                        <option value="1">图书</option>
                                        <option value="2">期刊</option>
                                        <option value="3">图片</option>
                                        <option value="4">音频</option>
                                        <option value="5">视频</option>
                                    </select>-->

            </div>

        </div>
        <!--选择高级检索方式-->
        <div class="search-body v-line">
            <div class="search-left">
                选择高级检索方式：
            </div>
            <div class="search-right" v-for="(field,index) in fields">
                <div>
                        <span class="s_inpt">
                            <el-select placeholder="请选择" v-model="field.filed_v">
                                <el-option
                                        v-for="item in options_data"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                             </el-select>
                        </span>
                    <span class="s_inpt">
                            <el-input placeholder="请输入内容" v-model="field.input_v" maxlength="30"></el-input>

                        </span>
                    <span class="s_inpt">
                            <el-button type="primary" size="mini"
                                       @click="clickBtn(index)">{{btn_name[index]}}</el-button>
                        </span>
                </div>
            </div>
        </div>
        <!--选择高级检索范围-->
        <div class="search-body v-line">
            <div class="search-left">
                选择高级检索范围：
            </div>
            <div class="search-right">

                <div class="block" style="display: inline-block;">
                    <span class="demonstration" style="font-weight: bolder;color: #c2c2c2">年份：</span>
                    <el-date-picker
                            v-model="form_data.start_date"
                            type="year"
                            value-format="yyyy"
                            placeholder="选择日期"
                            :picker-options="pickerOptions0"
                            v-on:change="resetValue"
                    >
                    </el-date-picker>
                </div>
                <div class="block" style="display: inline-block;">
                    <span class="demonstration">-</span>
                    <el-date-picker
                            v-model="form_data.end_date"
                            type="year"
                            value-format="yyyy"
                            placeholder="选择日期"
                            :picker-options="pickerOptions1"
                    >
                    </el-date-picker>
                </div>


            </div>
        </div>

        <div class="search-btn">
            <el-button type="primary" @click="go">检 索</el-button>
        </div>

        <iframe id="show-iframe" frameborder=0 scrolling=auto src="" ref="searchBlock"
                width="100%" height="1200px"></iframe>
    </div>
</div>
<div id="open" style="display: none;">
    <div style="text-align: center;margin: 20px;display: flex;">
        <select id="branch" class="form-control" name="" aria-required="true" style="width: 100%;">

        </select>
    </div>
    <input type="hidden" name="" value="" id="rid">
    <input type="hidden" name="" value="" id="type_id">
    <div style="display: flex;justify-content: center;margin-top: 20px">
        <span id="add_branch_resource" class='btn btn-primary' type="button">确认分配</span>
    </div>
</div>
<script>
    Vue.prototype.$axios = axios;
    axios.interceptors.request.use(function (config) {
        if (config.method === 'post') {
            config.data = Qs.stringify(config.data);
        }
        return config;
    }, function (error) {
        return Promise.reject(error);
    });
    new Vue({
        el: '#app',
        data() {
            return {
                min: 0,
                max: 0,
                pickerOptions0: {

                    disabledDate: (time) => {
                        let t = time.getFullYear();
                        return t < this.min || t > this.max;
                    }
                },
                pickerOptions1: {

                    disabledDate: (time) => {
                        let t = time.getFullYear();
                        return t < this.minStamp() || t > this.max;
                    }
                },
                //f分类 开始时间 结束时间
                form_data: {
                    //默认资源类型
                    selected: 1,
                    start_date: '',
                    end_date: '',
                },
                //选中资源类型对应的字段数组
                fields: [
                    {filed_v: '', input_v: ''},
                ],
                //分类选项
                options_type: [
                    {
                        value: 1,
                        label: '图书',
                        data: [
                            {value: 'res_subtitle', label: '题名'},
                            {value: 'author', label: '作者'},
                            {value: 'isbn', label: 'ISBN号'},
                            {value: 'keyword', label: '关键词'},
                            {value: 'summary', label: '简介'},
                        ]
                    },
                    {
                        value: 2,
                        label: '期刊',
                        data: [
                            {value: 'res_subtitle', label: '刊名'},
                            {value: 'author', label: '作者'},
                            {value: 'issn', label: 'ISSN号'},
                            {value: 'cn', label: 'CN号'},
                            {value: 'keyword', label: '关键词'},
                            {value: 'summary', label: '简介'},
                        ]
                    },
                    {
                        value: 3,
                        label: '图片',
                        data: [
                            {value: 'res_othertitle', label: '题名'},
                            {value: 'author', label: '作者'},
                            {value: 'keyword', label: '关键词'},
                            {value: 'summary', label: '简介'},
                        ]
                    },
                    {
                        value: 4,
                        label: '音频',
                        data: [
                            {value: 'res_othertitle', label: '题名'},
                            {value: 'author', label: '作者'},
                            {value: 'keyword', label: '关键词'},
                            {value: 'summary', label: '简介'},
                            {value: 'album_title', label: '专辑'},
                        ]
                    },
                    {
                        value: 5,
                        label: '视频',
                        data: [
                            {value: 'res_othertitle', label: '题名'},
                            {value: 'author', label: '作者'},
                            {value: 'keyword', label: '关键词'},
                            {value: 'summary', label: '简介'},
                        ]
                    },
                ],
                options_data: [],
                btn_name: ['添加搜索', '删除搜索', '删除搜索'],
            }
        },
        created() {
            this.getY(this.form_data.selected);
        },
        mounted() {
            this.options_data = this.options_type[0].data;
        },
        methods: {
            //获取分类
            resourceType() {
                this.getY(this.form_data.selected);
                //修改的时候输入的值都变为空
                this.fields = [];
                let v = {filed_v: '', input_v: ''};
                this.fields.push(v);
                this.form_data.start_date = '';
                this.form_data.end_date = '';
                //
                this.options_type.forEach((val) => {
                    if (val.value == this.form_data.selected) {
                        this.options_data = val.data;
                    }
                });
            },
            //添加输入框
            clickBtn(index) {
                let l = this.fields.length;
                if (index == 0 && l < 3) {
                    let v = {filed_v: '', input_v: ''};
                    //修改的时候输入的值都变为空
                    this.fields.push(v);
                }
                if (index != 0) {
                    //删除
                    this.fields.splice(index, 1);
                }
            },
            go() {
                let a = '<?=Url::toRoute('advanced-search/search')?>?';

                let data = {};
                data.t = this.form_data.selected;
                data.sd = this.form_data.start_date;
                data.ed = this.form_data.end_date;
                data.q = this.fields;

                console.log(Qs.stringify(data));

                a = a + Qs.stringify(data);
                console.log(this.$refs.searchBlock.src = a);

            },
            minStamp() {
                if (this.form_data.start_date) {
                    return this.form_data.start_date
                }
                return this.min;
            },
            resetValue() {
                if (this.minStamp() > this.form_data.end_date) {
                    this.form_data.end_date = '';
                }
            },
            //获取分类
            getY(type_id) {

                this.$axios({
                    method: 'GET',
                    url: '<?=Url::toRoute('advanced-search/get-year')?>?type_id=' + type_id,
                    dataType: "json",
                    responseType: 'json' // 默认的
                }).then(data => {
                    let res = data.data;
                    if (res.status == 200) {
                        console.log(this.min);
                        this.min = parseInt(res.data.min);
                        this.max = parseInt(res.data.max);
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 500},)
                    }
                }).catch(function (err) {
                    console.log(err);
                })
            },
        },
    });
</script>
<script>
    <?php $this->beginBlock('js_ok_remove') ?>
    //确认添加
    $(document).on('click', '#add_branch_resource', function () {
        let id = $('#rid').val();
        let br_id = $('#branch').val();
        let type_id = $('#type_id').val();
        let confirm_str = '';

        if (id > 0) {
            id = JSON.stringify(id);
            confirm_str = '确认分配选中资源';
        } else {
            confirm_str = '确认分配全部检索结果';
        }
        parent.layer.confirm(confirm_str, {icon: 3, title: ''}, function (index) {
            $.ajax({
                url: '<?=Url::toRoute('batch-send')?>',//'/resource/resource/upload-file'
                type: 'POST',
                data: {
                    id: id,
                    br_id: br_id,
                    type_id, type_id
                },
                dataType: "json",
                success: function (msg) {

                    if (msg.status == 200) {
                        layer.msg('操作成功，新增数据 ' + msg.data + '条', {icon: 1, time: 1000}, function () {
                        });
                    } else {
                        layer.msg(msg['msg'], {icon: 2, time: 1000});
                    }
                },
                error: function () {
                },
            });
            layer.close(index);
        });
    });
    <?php $this->endBlock() ?>
</script>
<?php $this->registerJs($this->blocks['js_ok_remove'], \yii\web\View::POS_END); ?>
